import React, { useState, useEffect } from 'react';
import { Button, Checkbox, Form, Input, Select, Upload,Radio } from 'antd';
import { history } from 'umi';
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
import { useAddKey } from '@/hooks/useKey';
import { timestampToTime } from '@/utils';

const { TextArea } = Input;
function housetype() {
  const [state, setState]: any = useState(history.location.state);
  //   console.log(state);
  const [value,setValue]=useState(1)
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  // editor 实例
  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
  // const [editor, setEditor] = useState(null)                   // JS 语法

  // 编辑器内容
  const [html, setHtml] = useState('<p>hello</p>');

  // 模拟 ajax 请求，异步设置 html
  useEffect(() => {
    setTimeout(() => {
      setHtml('<p>hello world</p>');
    }, 1500);
  }, []);

  // 工具栏配置
  const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法
  // const toolbarConfig = { }                        // JS 语法

  // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {
    // TS 语法
    // const editorConfig = {                         // JS 语法
    placeholder: '请输入内容...',
  };

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);

  return (
    <div>
      <Form
        name="basic"
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item label="所属楼盘" name="username">
          <Input defaultValue={state.title} bordered={false} disabled />
        </Form.Item>

        <Form.Item label="户型名称">
          <Input placeholder={'户型名称'} style={{ width: 300 }}/>
        </Form.Item>

        <Form.Item label="标题" name="username">
          <Input placeholder="标题" style={{ width: 300 }} />
        </Form.Item>

        <Form.Item label="朝向">
          <Select
            defaultValue="default"
            style={{ width: 120 }}
            options={[
              {
                value: 'default',
                label: '--请选择--',
              },
              {
                value: 'jack',
                label: '东',
              },
              {
                value: 'lucy',
                label: '南',
              },
              {
                value: 'disabled',
                label: '西',
              },
              {
                value: 'Yiminghe',
                label: '北',
              },
            ]}
          />
        </Form.Item>

        <Form.Item label="装修情况">
          <Radio.Group
            value={value}
            onChange={(e) => {
              // console.log('radio checked', e.target.value);
              setValue(e.target.value);
            }}
          >
            <Radio value={1}>在售</Radio>
            <Radio value={2}>未售</Radio>
            <Radio value={3}>售完</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item label="户型特色">
          <TextArea style={{ width: 600, height: 100 }} />
        </Form.Item>

        <Form.Item label="户型图">
          <Upload>
            <Button>上传图片</Button>
          </Upload>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 2, span: 16 }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default housetype;
